<template>
	<view class=" login-content" >
		<!-- <view class="zhan1"></view>
		<view class="head">
			<span class="text">登录</span>
			<view class="head-right">
				<i class="iconfont icondelete1" @tap="back"></i>
			</view>
		</view> -->
		<!-- <i class="iconfont icondengluyonghu"></i> -->
		<view class="login-box">
			<view class="login-item">
				<i class="iconfont iconzhanghao"></i>
				<input  class="login-input" type="text" placeholder="手机号码" v-model="phone">
			</view>
			<view class="login-item">
				<i class="iconfont iconxiaoxi"></i>
				<input  class="login-input" type="number" placeholder="验证码" v-model="code">
				<span class="set" @tap="getCode" v-show="show">发送验证码</span>
				<view class="set" v-show="!show">{{countMes}}</view>
			</view>
			<view class="login-item">
				<i class="iconfont iconai-password"></i>
				<input  class="login-input" type="password" placeholder="新密码" v-model="password">
			</view>
			<view class="login-item">
				<i class="iconfont iconai-password"></i>
				<input  class="login-input" type="password" placeholder="确认密码" v-model="password1">
			</view>
		</view>
		<view class="login-button" @tap="save">修改密码</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie'
	import CryptoJS from 'crypto-js'
	
	// 加密所需的key
	const KEY = '26c4c96764ad2319fdd3154f3fe6c4e5'
	
	// DES加密
	export const encryptDes = (msg) => {
	  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
	  var option = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
	  var encrypted = CryptoJS.AES.encrypt(msg, keyHex, option)
	  return encrypted.ciphertext.toString()
	}
	
	// DES解密
	export const decryptDes = (msg) => {
	  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
	  var decrypted = CryptoJS.AES.decrypt(
	    {
	      ciphertext: CryptoJS.enc.Utf8.parse(msg)
	    },
	    keyHex,
	    {
	      mode: CryptoJS.mode.ECB,
	      padding: CryptoJS.pad.Pkcs7
	    }
	  )
	  return decrypted.toString(CryptoJS.enc.Utf8)
	}
	var _self;
	var canvasObj = {};
	export default {
		computed:{},
		components: {},
		data(){
			return{
				phone:'',
				password:'',
				password1:'',
				code:'',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth: '', //圆弧进度图
				cHeight: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				pixelRatio: 1,
				count:"",
				show:true,
	            countMes:"",
	            timer:null,
			}
		},
		onLoad(options) {
			
		},
		onBackPress(e){
			
		},
		onReady(){

		},
		methods:{
			touchPie(e,id) {
	            canvasObj[id].showToolTip(e, {
	                format: function(item) {
	                    return item.name + ':' + item.data
	                }
	            });
	        },
	        back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			save(){
	            let that = this;
	            if(this.phone==""){
	                uni.showToast({
		          		title:'请输入手机号',
		          		icon:'none'
		          	})
	                return;
	            }
	            else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
	                uni.showToast({
		          		title:'请输入正确的手机号',
		          		icon:'none'
		          	})
	                return;
	            }
	            else if(this.code==""){
	                uni.showToast({
		          		title:'请输入验证码',
		          		icon:'none'
		          	})
	                return;
	            }
	            else if(this.password==""){
	                uni.showToast({
		          		title:'请输入新密码',
		          		icon:'none'
		          	})
	                return;
	            }
	            else if(this.password1==""){
	                uni.showToast({
		          		title:'请确认密码',
		          		icon:'none'
		          	})
	                return;
	            }
	            else if(this.password1!=this.password){
	                uni.showToast({
		          		title:'两次密码不一致',
		          		icon:'none'
		          	})
	                return;
	            }
	            // else if(!this.checked){
	            //     Notification.warning({
	            //       title:'提示',
	            //       message:"请勾选条款"
	            //     });
	            //     return;
	            // }
				this.password = encryptDes(this.password)
				this.password1 = encryptDes(this.password1)
	            this.$http.post('/f/userResetPassword?mobile='+this.phone+"&mobileCode="+this.code+"&password="+this.password+"&newPassword="+this.password1)
	            .then(function (response) {
	              	uni.showToast({
		          		title:'密码已重置',
		          		icon:'success'
		          	})
		          	setTimeout(()=>{
		          		that.back();
		          	},500)
	            })
	            .catch(function (error) {
	              console.log(error);
	            })
	        },
			getCode(){
	          var that = this;
	          if(this.phone==""){
	          	uni.showToast({
	          		title:'请输入手机号',
	          		icon:'none'
	          	})
	          }
	          else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
	            uni.showToast({
	          		title:'请输入正确的手机号',
	          		icon:'none'
	          	})
	          }
	          else{
	            this.$http.get('/f/getMobileValidate?mobile='+this.phone+"&templateId=ZHMM_MOULD_ID")
	            .then(function (response) {
	              	uni.showToast({
		          		title:'验证码已发送'
		          	})
	              let TIME_COUNT = 60;
	              that.countMes = "60S"
	              if (!that.timer) {
	                 console.log(666)
	                 that.count = TIME_COUNT;
	                 that.show = false;
	                 that.timer = setInterval(() => {
	                 if (that.count > 0 && that.count <= TIME_COUNT) {
	                   that.count--;
	                   var countMes = that.count+"S";
	                   that.countMes = countMes;
	                  } else {
	                   that.show = true;
	                   clearInterval(that.timer);
	                   that.timer = null;
	                  }
	                 }, 1000)
	              }
	            })
	            .catch(function (error) {
	              console.log(error);
	            })
	          }
	          
	        },
		}
	}
</script>

<style lang="less">
	.login-content{
		padding:0;
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;
		.text-box{
			width:670rpx;
			margin:0 auto;
			margin-top:20rpx;
			height:60rpx;
			.back{
				float:right;
				line-height:60rpx;
				font-size:28rpx;
				color:#666666;
				margin-left:20rpx;
			}
			.reg{
				float:right;
				line-height:60rpx;
				font-size:28rpx;
				color:#666666;
			}
		}
		.login-button{
			margin:0 auto;
			width:670rpx;
			border-radius:10rpx;
			background:#1783dd;
			font-size:32rpx;
			color:#ffffff;
			line-height:90rpx;
			height:90rpx;
			text-align:center;
			margin-top:40rpx;
		}
		.login-box{
			width:670rpx;
			box-sizing:border-box;
			margin:0 auto;
			margin-top:40rpx;
			border:1px solid #f0f0f0;
			border-radius:10rpx;
			overflow:hidden;
			
			.login-item{
				width:100%;
				height:100rpx;
				border-bottom:1px solid #f0f0f0;
				display:flex;
				align-items:center;
				background:#ffffff;
				position:relative;
				.set{
					position:absolute;
					width:150rpx;
					height:50rpx;
					background:#1783dd;
					text-align:center;
					line-height:50rpx;
					border-radius:6rpx;
					font-size:26rpx;
					color:#fff;
					top:25rpx;
					right:30rpx;
				}
				.login-input{
					width:calc(100% - 96rpx);
					height:100rpx;
					font-size:28rpx;
					color:#888888;
					box-sizing:border-box;
					padding-left:20rpx;
				}
				.iconzhanghao,.iconxiaoxi{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
				.iconai-password{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
			}
			.login-item:last-child{
				border:0;
			}
		}
		.icondengluyonghu{
			width:200rpx;
			height:200rpx;
			display:block;
			margin:60rpx auto;
			font-size:140rpx;
			color:#777777;
			line-height:200rpx;
			text-align:center;
		}
		.head{
			width:100%;
			height:90rpx;
			box-sizing:border-box;
			padding:0 35rpx;
			padding-top:20rpx;
			background:#ffffff;
			box-shadow:0 -4rpx 16rpx #ccc;
			display:flex;
			justify-content: center;
			position:relative;
			.text{
				line-height:70rpx;
				font-size:36rpx;
				color:#555555;
				font-weight:600;
			}
			.head-right{
				display:flex;
				align-items:center;
				position:absolute;
				right:35rpx;
				top:35rpx;
				.icondelete1{
					display:block;
					font-size:42rpx;
					color:#3478f7;
				}
				.login{
					font-size:28rpx;
					color:#3478f7;
				}
			}
		}
	}

</style>
